<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<link rel="stylesheet" href="../css/animate.css" />
	</head>
	<body>
		<!--需求：点击按钮：标签h3里的内容 出现，在点击:隐藏-->
		<div id="app">
			<input type="button" value="点击" @click="flag=!flag" />
			<!--<transition enter-active-class="animated bounceIn"  leave-active-class="animated bounceOut">
				<h3 v-show="flag">h3标签显示</h3>
			</transition>
-->			
			
			<!--<transition enter-active-class=" bounceIn"  leave-active-class="bounceOut">
				<h3 v-show="flag"  calss="animated">h3标签显示</h3>
			</transition>-->
			
			<!--:duration="毫秒值"  用于指定动画进入，离开的毫秒值-->
			<!--<transition enter-active-class=" bounceIn"  leave-active-class="bounceOut" :duration="400">
				<h3 v-show="flag"  calss="animated">h3标签显示</h3>
			</transition>
-->			
			<!--:duration="{enter:入场毫秒值,leave:离场毫秒值}"  分别指定动画进入，离开的时长-->
			<transition enter-active-class=" bounceIn"  leave-active-class="bounceOut" :duration="{enter:400,leave:1000}">
				<h3 v-show="flag"  calss="animated">h3标签显示</h3>
			</transition>

		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				flag:false
			},
			methods:{
				
			}
		});
	</script>
</html>